<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 3200px;
            height: 600px;
            /* position: absolute; */
        }

        .box .lb {
            width: 800px;
            height: 600px;
            float: left;
            background-color: aqua;
        }

        .btnbox {
            width: 300px;
            height: 10px;
            display: flex;
            justify-content: space-around;
            position: absolute;
            bottom: 0;
            left: 0;
            margin: auto;
            right: 0;

        }

        .btnbox div {
            width: 40px;
            height: 10px;
            background-color: palegreen;
        }

        .ma {
            position: relative;
            width: 800px;
            height: 600px;
            overflow: hidden;
            /* border: 1px solid  red; */
        }
        img{
            width: 800px;
            height: 600px;
        }
    </style>
    <script src="./框架相关的js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <div class="ma">
        <div class="box">
            <div class="lb">
                <img src="./img/mn.jpg" alt="">

            </div>
            <div class="lb" data-num="2">
                <img src="./img/1.jpg" alt="">
            </div>
            <div class="lb" data-num="3">
                <img src="./img/js.jpg" alt="">
            </div>
            <div class="lb" data-num="4">
                <img src="./img/lyf.png" alt="">

            </div>

        </div>
        <div class="btnbox">
            <div data-num="1"></div>
            <div data-num="2"></div>
            <div data-num="3"></div>
            <div data-num="4"></div>
        </div>
    </div>

    <script>
        var btnbox = document.querySelector('.btnbox')
        var box = document.querySelector('.box')
        var lb = document.querySelectorAll('.lb')
        let start = 0
        var timer=null
        btnbox.onclick = function (e) {
            clearInterval(timer)
            console.log($(e.target).attr('data-num'),'????');
            start =$(e.target).attr('data-num')-1
            $('.box').css('margin-left', -($(e.target).attr('data-num') * 800) + 800 + 'px')
            $('.box').css('transition', 'margin-left 1s linear ');

            setTimeout(function(){
                timer=    setInterval( slideshow, 2000)
            },2000)
        }
        
        let num = lb.length
        var status = true
            
          function  slideshow(){
            if (status=='true') {
                start++
                console.log('从右往左来 播放后面的图片');
                console.log(start,'1111111111');
                if (start > num-1) {      //播放到第四张图片  最后一张
                    // 第四张的时候
                    // console.log(start,num,'2333');
                    // console.log('播放下一张  从左往右走');
                    console.log(start);
                    start=2
                    status = false
                }
                $('.box').css('margin-left', -(start * 800) + 'px')      
                $('.box').css('transition', 'margin-left 1s linear ');    
            
            } else {
                console.log(start,'???????????????????????');
                start--
                if (start == 0) {
                    status = true
                }
                $('.box').css('margin-left', -(start * 800)  + 'px')
                $('.box').css('transition', 'margin-left 1s linear ');
            }
          }

    timer=    setInterval( slideshow, 2000)

    </script>
</body>

</html>